<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="身体活动评估" left-arrow @click-left="$router.go(-1)" />
    <!-- 选项开始 -->
    <div class="item">
      <!-- 第一题 -->
      <van-radio-group v-model="first">
        <p>1.您的年龄是?</p>
        <van-cell-group border>
          <van-cell title="≥18岁" clickable @click="first = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="<18岁" clickable @click="first = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- 第二题 -->
      <van-radio-group v-model="second">
        <p>
          2.在您的工作、农活及家务活动中，有没有高强度活动，并且活动时间持续10分钟以上?(高强度活动是指如搬运重物、挖掘等需要付出较大体力，或引起呼吸、心跳显著增加的活动)?
        </p>
        <van-cell-group>
          <van-cell title="没有" clickable @click="second = '1'" >
            <template #right-icon>
              <van-radio name="1"/>
            </template>
          </van-cell>
          <van-cell title="有" clickable @click="second = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- 第三题 -->
      <van-radio-group v-model="third">
        <p>
          3.在您的工作、农活及家务活动中，有没有中等强度活动，并且活动时间持续10分钟以上?(中等强度活动是指如锯木头、洗衣服、打扫卫生等需要付出中等体力，或引起呼吸、心跳轻度增加的活动)?
        </p>
        <van-cell-group>
          <van-cell title="没有" clickable @click="third = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="有" clickable @click="third = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- 第四题 -->
      <van-radio-group v-model="fourth">
        <p>4.您在外出时，有没有步行或骑自行车持续至少10分钟的情况?</p>
        <van-cell-group>
          <van-cell title="没有" clickable @click="fourth = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="有" clickable @click="fourth = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- 第五题 -->
      <van-radio-group v-model="fifth">
        <p>5.您是否进行持续至少10分钟，引起呼吸、心跳显著增加的高强度运动或休闲活动？如长跑、游泳、踢足球等?</p>
        <van-cell-group>
          <van-cell title="没有" clickable @click="fifth = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="有" clickable @click="fifth = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- 第六题 -->
            <van-radio-group v-model="sixth">
        <p>6.您是否进行持续至少10分钟，引起呼吸、心跳轻度增加的中等强度运动或休闲活动？如快步走、打太极拳等?</p>
        <van-cell-group>
          <van-cell title="没有" clickable @click="sixth = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="有" clickable @click="sixth = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <button @click="change">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      first: "",
      second: "",
      third: "",
      fourth: "",
      fifth: "",
      sixth:""
    };
  },
  methods: {
    change() {
      this.$router.push('/tableresult')
    }
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.item {
  border-radius: 15px;
  box-shadow: 0 1px 1px hsl(0deg, 0%, 89%);
}
van-cell.title{
  font-size: 20px;
}
p {
  margin: 4vw;
}
button {
  display: block;
  margin: 0 auto;
  color: #fff;
  margin-top: 20px;
  border: none;
  width: 85%;
  height: 40px;
  border-radius: 15px;
  background-color: #1074ff;
}
</style>